<template>
  <div>
    <div
      class="survey-com-item-container pointer flex justify-content-center align-items-center self-center pl-10 pr-10 mb-10"
      @click="addSurveyComItem"
    >
      <div>{{ item.comName }}</div>
    </div>
  </div>
</template>

<script setup>
import { defaultStatusMap } from '@/configs/DefaultStatus/DefaultStatusMap';
import { updateInitStatusBeforeAdd } from '@/utils';
import EventBus from '@/utils/eventBus';
// 仓库
import { useEditorStore } from '@/stores/useEditor';
const store = useEditorStore();

const props = defineProps({
  item: Object,
});

const addSurveyComItem = () => {
  const newMaterialName = props.item?.materialName;
  if (!newMaterialName) {
    console.warn('newMaterialName is required');
    return;
  }
  const status = defaultStatusMap[newMaterialName]();
  updateInitStatusBeforeAdd(status, newMaterialName);
  store.addCom(status);
  EventBus.emit('scrollToBottom');
};
</script>

<style scoped lang="scss">
.survey-com-item-container {
  width: 80px;
  height: 30px;
  background-color: var(--background-color);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-base);
  color: var(--font-color-light);
  user-select: none;
}
.survey-com-item-container:hover {
  background-color: var(--font-color-lightest);
}
</style>
